<template>
  <div class="home-container">
    <van-nav-bar title="仿头条" fixed/>
    <van-list
      v-model = "loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <Article v-for="(i, m) in arlist"
        :key="m"
        :num="i.comm_count"
        :title="i.title"
        :time="i.pubdate"
        :cover="i.cover"
        :author="i.aut_name"></Article>
    </van-list>
  </div>
</template>

<script>
import Article from '@/components/Article/Article.vue'
import { getJhArticleApi } from '@/api/juheApi.js'
import { getArticleApi } from '@/api/articleApi.js'
import { getHmGoodsApi } from '@/api/hmgoods.js'
export default {
  name: 'myHome',
  data () {
    return {
      txkey: '1b7a481c28d0cf97ce13f11ead29d0e6',
      jhkey: '4f1a41512e280bd16bad1008ff067bfb',
      jhtype: 'top',
      arlist: [],
      loading: true,
      finished: false
    }
  },
  methods: {
    async initArticleApi () {
      const { data: res } = await getArticleApi()
      this.arlist = [...this.arlist, ...res.newslist]
      this.loading = false
    },
    async initJhAtc () {
      const { data: res } = await getJhArticleApi(this.jhtype, this.jhkey)
      console.log(res)
    },
    async intiHmApi () {
      const { data: res } = await getHmGoodsApi()
      this.arlist = [...this.arlist, ...res]
      this.loading = false
    },
    onLoad () {
      // this.initArticleApi()
      // this.initJhAtc()
      this.intiHmApi()
      console.log(this.arlist)
      if (this.arlist.length > 60) {
        this.finished = true
      }
    }
  },
  components: {
    Article
  },
  created () {
    // this.initArticleApi()
    // this.initJhAtc()
    this.intiHmApi()
    this.loading = false
  }
}
</script>

<style lang="less" scoped>
  .home-container {
    padding: 46px 0 50px 0
  }
  // 在浏览器调试工具中找到哪个类含有bgc属性，将那个类的bgc样式覆盖为深天蓝
  .van-nav-bar {
    background-color: deepskyblue;
  }
  // 同理找到控制字体颜色的类，覆盖那个类的字体颜色样式为白色
  .van-nav-bar__title {
    color: white;
  }
  // 然后发现上面修改van-nav-bar__title类的字体颜色样式没有生效
  // 因为使用scoped后，对组件应用样式时vue会在组件中添加data-v-xxxxxxx属性
  // 对该组件的样式修改会应用到该类+属性选择器上，使修改的样式优先级高于原样式
  // 但控制字体颜色的类并没有data-v-xxxxx属性，所以对字体颜色样式的修改优先级相同，根据默认值设置
  // 为提高修改样式的优先级，可在类选择器前添加/deep/，效果等同于"父级类选择器" "子级类选择器"
  /deep/ .van-nav-bar__title {
    color: aliceblue;
  }
</style>
